<template>
  <div class="container">
    <div class="container_bg">
      <code-rain></code-rain>
      <line-rain></line-rain>
    </div>
    <div class="top">
      <div class="title">
        <p>{{ title }}</p>
      </div>
    </div>
    <div class="bottom">
      <el-row :gutter="20">
        <el-col v-for="item in list" :key="item.id" :span="span">
          <div class="card_item" :style="{ background: item.bgColor + '99' }">
            <div
              class="icon"
              :style="{ backgroundImage: `url(${item.icon})` }"
            ></div>
            <div class="card_title">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
      <div class="wrapper" @click="goHome">
        <div class="item">
          <div class="icon"></div>
          <div class="title">首页</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryList: [
        {
          id: 1,
          name: "本专科学籍",
          bgColor: "#253bc8",
          icon: require("@/assets/images/academicDissertationImages/college_status_icon.png"),
        },
        {
          id: 2,
          name: "研究生学籍",
          bgColor: "#075f85",
          icon: require("@/assets/images/academicDissertationImages/postgraduate_status_icon.png"),
        },
        {
          id: 3,
          name: "中途离校学籍",
          bgColor: "#3d07a3",
          icon: require("@/assets/images/academicDissertationImages/halfway_out_of_school_icon.png"),
        },
        {
          id: 4,
          name: "成教学籍",
          bgColor: "#024a85",
          icon: require("@/assets/images/academicDissertationImages/adult_education_school_status_icon.png"),
        },
      ],
      queryList1: [
        {
          id: 1,
          name: "研究生论文查询",
          bgColor: "#0a6082",
          icon: require("@/assets/images/academicDissertationImages/graduate_thesis_inquiry_icon.png"),
        },
        {
          id: 2,
          name: "科研成果信息查询",
          bgColor: "#6b357e",
          icon: require("@/assets/images/academicDissertationImages/research_results_information_query_icon.png"),
        },
      ],
      crumbsList: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "学位论文管理",
          path: "/academic_dissertation",
        },
      ],
      rootFontSize: 0,
      title: "",
      span: 6,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.title = this.$route.query.title;
      if (this.title === "学籍档案管理系统") {
        this.list = this.queryList;
        this.span = 6;
      } else {
        this.list = this.queryList1;
        this.span = 12;
      }
    },
    goHome() {
      this.$router.push("/");
    },
    handleResize() {
      this.rootFontSize = window.innerWidth / 100; // 根据需要计算根字号
      document.documentElement.style.fontSize = this.rootFontSize + "px";
    },
  },
  mounted() {
    document.oncontextmenu = function () {
      return false;
    };
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="scss" scoped>
@keyframes cardInteractionEffect {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
.container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .container_bg {
    overflow-x: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #02004d;
  }
  .top {
    padding: 1.0417rem 0;
    margin-bottom: 1.5625rem;
    background-image: url("@/assets/images/academicDissertationImages/banner.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    // height: 10.4167rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .title {
      p {
        color: rgba($color: #fff, $alpha: 0.9);
        text-align: center;
        font-size: 2.3958rem;
        font-weight: 700;
      }
    }
  }
  .bottom {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .card_item {
      margin: 1.0417rem auto;
      border-radius: 0.2604rem;
      width: 11.4583rem;
      height: 15.625rem;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      .icon {
        width: 5.2083rem;
        height: 5.2083rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .card_title {
        font-size: 1.0417rem;
        font-weight: 700;
        position: relative;
        color: #fefefe;
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: -0.5208rem;
          transform: translateX(-50%);
          display: block;
          width: 2em;
          height: 0.1042rem;
          background-color: #f5f5f5;
          transition: all 0.5s;
        }
      }
      &:hover {
        cursor: pointer;
        animation: cardInteractionEffect 0.5s;
        .card_title::after {
          width: 100%;
        }
      }
    }
    .wrapper {
      position: fixed;
      bottom: 1.0417rem;
      left: 50%;
      transform: translateX(-50%);
      width: 3.125rem;
      height: 3.125rem;
      // background: #111111;
      padding: 0.3125rem;
      cursor: pointer;
    }

    .item {
      margin: auto;
      position: relative;
      --size: 3.125rem;
      height: var(--size);
      width: var(--size);
      background-color: rgba(1, 161, 236, 0.774);
      border-radius: 50%;
      border: 0.1563rem solid rgba(12, 172, 247, 0.911);
      color: #fff;
      font-weight: 800;
      // line-height: var(--size);
      text-align: center;
      // font-size: 1.5625rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon {
        width: 2.0833rem;
        height: 2.0833rem;
        background-image: url("@/assets/images/academicDissertationImages/home.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }

    .item::before {
      content: "";
      position: absolute;
      inset: -0.3646rem;
      border-top: 0.5729rem solid #f5f5f5;
      border-radius: 50%;
      filter: drop-shadow(0.0521rem 0.0521rem 0.2604rem #f5f5f5);
      z-index: 1;
      transition: all 1s;
      animation: 2.3s linear infinite spin;
    }

    .item::after {
      content: "";
      position: absolute;
      inset: -0.3646rem;
      border-bottom: 0.5729rem solid rgb(0, 60, 255);
      border-radius: 50%;
      filter: drop-shadow(0.0521rem 0.0521rem 0.2604rem rgb(0, 140, 255));
      z-index: 2;
      transition: all 1s;
      animation: 2.3s linear infinite spin;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
        border-width: 0.1563rem;
        opacity: 0.66;
      }
      50% {
        opacity: 0.9;
        border-width: 0.4167rem;
      }
      100% {
        transform: rotate(360deg);
        opacity: 0.66;
        border-width: 0.1563rem;
      }
    }
  }
}
</style>
